<template>
  <div>
    <el-container>
      <el-aside :style="{ minHeight: '100vh', boxShadow: '3px 3px 3px #888888' }" :width="asideWidth" class="el-aside">
        <div style="height: 60px;border-radius: 10px;background-color: #dfe4ed;font-size: 18px;color: white;display: flex
        ;align-items: center;justify-content: center">
          <img src="@/assets/logo.png" alt="" style="width: 40px;height: 40px">
          <span style="margin-left: 20px;font-size: 20px;color: black" >Yintao</span>
        </div>
        <el-menu style="border: none" @select="handleSelect" >
          <el-menu-item index="home" >
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span style="font-size: 16px">系统首页</span>


            </template>

          </el-menu-item>
          <el-submenu index="info" v-if="user.role === '管理员' ">
            <template slot="title">
              <i class="el-icon-upload"></i>
              <span style="font-size: 16px">信息管理</span>

            </template>
            <router-link to="/announcement1" tag="el-menu-item" style="font-size: 16px">公告信息</router-link>
            <router-link to="/department1" tag="el-menu-item" style="font-size: 16px">部门信息</router-link>
            <router-link to="/image information1" tag="el-menu-item" style="font-size: 16px">图像信息</router-link>
          </el-submenu>
          <el-submenu v-if="user.role === '管理员' ">
            <template slot="title">
              <i class="el-icon-chat-line-square"></i>
              <span style="font-size: 16px">人事管理</span>

            </template>
            <router-link to="/finance information1" tag="el-menu-item" style="font-size: 16px">薪资信息</router-link>
            <router-link to="/pay1" tag="el-menu-item" style="font-size: 16px">财务支出</router-link>
            <router-link to="/leave approval1" tag="el-menu-item" style="font-size: 16px">请假审批</router-link>
            <router-link to="/asset information1" tag="el-menu-item" style="font-size: 16px">资产信息</router-link>
            <router-link to="/asset approval1" tag="el-menu-item" style="font-size: 16px">资产审批</router-link>
          </el-submenu>
          <el-submenu v-if="user.role === '管理员' ">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span style="font-size: 16px">用户管理</span>

            </template>
            <router-link to="/user information1" tag="el-menu-item" style="font-size: 16px">用户信息</router-link>
          </el-submenu >
          <el-submenu v-if="user.role === '员工' ">
            <template slot="title">
              <i class="el-icon-chat-line-square"></i>
              <span style="font-size: 16px">人事管理</span>

            </template>
            <router-link to="/finance information3" tag="el-menu-item" style="font-size: 16px">薪资信息</router-link>
            <router-link to="/leave record3" tag="el-menu-item" style="font-size: 16px">请假记录</router-link>
            <router-link to="/asset information3" tag="el-menu-item" style="font-size: 16px">资产信息</router-link>
            <router-link to="/employee asset3" tag="el-menu-item" style="font-size: 16px">员工资产</router-link>
          </el-submenu>

          <el-submenu v-if="user.role === '主管' ">
            <template slot="title">
              <i class="el-icon-chat-line-square"></i>
              <span style="font-size: 16px">人事管理</span>

            </template>
            <router-link to="/finance information2" tag="el-menu-item" style="font-size: 16px">薪资信息</router-link>
            <router-link to="/leave record2" tag="el-menu-item" style="font-size: 16px">请假记录</router-link>
            <router-link to="/leave approval2" tag="el-menu-item" style="font-size: 16px">请假审批</router-link>
            <router-link to="/asset information2" tag="el-menu-item" style="font-size: 16px">资产信息</router-link>
            <router-link to="/asset approval2" tag="el-menu-item" style="font-size: 16px">资产审批</router-link>
            <router-link to="/employee asset2" tag="el-menu-item" style="font-size: 16px">员工资产</router-link>
          </el-submenu>

        </el-menu>

      </el-aside>
      <el-container>
        <el-header>
          <i :class="collapseIcon" style="width: 50px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex:1;width: 0;display: flex;align-items: center;justify-content: flex-end" >
            <el-dropdown placement="bottom">
              <div style="display: flex;align-items: center">
                <img :src="user.avatar" alt="" style="width: 40px;height: 40px"></img>
                <!-- 使用插值表达式显示用户的角色名称 -->
                <span style="margin-left: 5px">{{ user.role }}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/personal information')">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/change password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
         <router-view @update:user="updateUser" />

        </el-main>


          <div style="width: 100%;height: 500px;display: flex;margin-top: 20px;flex-direction: column;box-shadow: 1px 1px 3px" v-if="学生">
            <el-card style="margin: 10px">
              <span>这里是数据库</span>
            </el-card>

            <div style="margin: 10px">
              <el-table :data="users" style="color: black" >


                <el-table-column label="ID" prop="id" ></el-table-column>
                <el-table-column label="账号" prop="username" ></el-table-column>
                <el-table-column label="密码" prop="password" ></el-table-column>
                <el-table-column label="文件上传">
                <template slot-scope="scope">
                  <el-upload
                      action="http://localhost:8080/file/upload"
                      :headers="{token:user.token}"
                      :on-success="(response, file, fileList) => handleTableFileUpload(scope.row, response, file, fileList)"
                      :show-file-list="false"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </template>

                </el-table-column>
                <el-table-column label="资产图片" prop="avatar">
                  <template v-slot="scope">
                    <el-image v-if="scope.row.avatar" :src="scope.row.avatar" fit="contain" style="width: 150px; height: 150px"></el-image>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>


      </el-container>

    </el-container>
  </div>

</template>



<script>
// @ is an alias to /src
import request from "@/utils/request";
export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: true,
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      users:'',
      user : JSON.parse(localStorage.getItem('honey-user') || '{}'),
      url:'',
    }
  },
  methods: {
    updateUser(user) {
      this.user = user;
    },
    handleTableFileUpload(row, response, file, fileList) {
      if (response.code === '200') {
        row.avatar = response.data; // 假设后端返回的URL在response.data中
        request.put('/user/update', row).then(res => {
          if (res.code === '200') {
            this.$message.success('上传成功');
          } else {
            this.$message.error(res.msg);
          }
        }).catch(error => {
          this.$message.error('更新信息失败');
          console.error(error);
        });
      } else {
        this.$message.error('文件上传失败');
      }
    },
    logout(){
      localStorage.removeItem('honey-user')
      this.$router.push('/login')
    },
    handleCollapse(){
      this.isCollapse = ! this.isCollapse
      this.asideWidth = this.isCollapse ? '49px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    handleSelect(key) {
      if (key === 'home') {
        this.$router.push('/home');
      }
      // 处理其他菜单项的选择
    }
  },
  mounted(){
    request.get('/user/get').then(res =>{
      this.users = res.data
    })
  }

};
</script>
<style>

.el-menu-item:hover {
  color: violet ;
}
.el-aside {
  transition: width .3s;

}
.el-header {
  box-shadow: 2px 1px 1px 1px ;
  display: flex;
  align-items: center;
}
</style>